<template>
	<h3>watch vs watchEffect</h3>
	<p>{{ numberRef }}</p>
	<p>{{ name }} {{ age }}</p>
	<p>{{ wife }}</p>
</template>

<script>
	import { reactive, ref, toRefs, watch, watchEffect } from "vue";

	export default {
		name: "Watch",
		setup() {
			const numberRef = ref(100);
			const state = reactive({
				name: "steve",
				age: 20,
				wife: {
					money: 123,
					friends: ["老王", "西门大官人"],
				},
			});

			/* 监听单个数据 */
			// watch(
			// 	numberRef,
			// 	(newNumber, oldNumber) => {
			// 		console.log("ref watch", newNumber, oldNumber);
			// 	},
			// 	{
			// 		immediate: true, // 初始化之前就监听，可选
			// 	}
			// );
			// setTimeout(() => {
			// 	numberRef.value = 200;
			// }, 1500);

            /* 深度监听 */
			watch(
			    // 第一个参数，确定要监听哪个属性
			    () => state.wife,

			    // 第二个参数，回调函数
			    (newAge, oldAge) => {
			        console.log('watch wife', newAge, oldAge)
			    },

			    // 第三个参数，配置项
			    {
			        immediate: true, // 初始化之前就监听，可选
			        deep: true // 深度监听
			    }
			)
			setTimeout(() => {
			    // state.wife.money += 100
			    state.wife.friends.push("希哥")
			}, 2000);



            /* 自动收集依赖并建立监听 */
			// 初始化时，一定会执行一次（收集要监听的数据）
			// watchEffect(() => {
			// 	console.log("hello watchEffect");
			// });
			// watchEffect(() => {
			// 	console.log("state.age", state.age);
			// });
			// watchEffect(() => {
			// 	console.log("numberRef.value", numberRef.value);
			// });
            // watchEffect(()=>{
            //     console.log("watchEffect friends",state.wife.friends);
            // })

			// setTimeout(() => {
			// 	state.age = 25;
			// }, 1500);

			// setTimeout(() => {
			// 	numberRef.value += 1;
			// }, 3000);

			// setTimeout(() => {
			// 	// state.wife.money += 100
			// 	state.wife.friends.push("希哥");
			// }, 2000);

			return {
				numberRef,
				...toRefs(state),
			};
		},
	};
</script>